<template>
  <div>
      
  <div >
      <el-tabs v-model="activeName" @tab-click="handleClick">

        <el-tab-pane label="全部评价" name="first">
          
          <el-card class="box-card"  v-for="evaluate in evaluateAll" :key="evaluate.comm_id">
            <div slot="header" class="clearfix" >
              {{add(evaluate.commType)}}
              <span v-if="evaluate.isAnonymous == 0">{{evaluate.userName}}</span>
              <span v-if="evaluate.isAnonymous != 0">{{evaluate.userName.substr(0,2) + "***"}}</span>
              &nbsp;&nbsp;&nbsp;<span >{{transformTimestamp(evaluate.sepcName)}}</span>
                
            </div>
            <p>{{evaluate.commContent}}</p>
          </el-card>
          <el-empty description="暂无评论" v-if="one == 0"></el-empty>
        </el-tab-pane>
        <el-tab-pane label="好评" name="second">
          <div v-for="evaluate in evaluateAll" :key="evaluate.comm_id">
          <el-card class="box-card" v-if="evaluate.commType == 1" >
            <div slot="header" class="clearfix">
              {{add(evaluate.commType)}}
              <span v-if="evaluate.isAnonymous == 0">{{evaluate.userName}}</span>
              <span v-if="evaluate.isAnonymous != 0">{{evaluate.userName.substr(0,2) + "***"}}</span>
              &nbsp;&nbsp;&nbsp;<span >{{transformTimestamp(evaluate.sepcName)}}</span>
                
            </div>
            <p>{{evaluate.commContent}}</p>
          </el-card>
          </div>
          <el-empty description="暂无评论" v-if="two == 0"></el-empty>
        </el-tab-pane>
        <el-tab-pane label="中评" name="third">
          <div v-for="evaluate in evaluateAll" :key="evaluate.comm_id">
          <el-card class="box-card" v-if="evaluate.commType == 0">
            <div slot="header" class="clearfix">
              {{add(evaluate.commType)}}
              <span v-if="evaluate.isAnonymous == 0">{{evaluate.userName}}</span>
              <span v-if="evaluate.isAnonymous != 0">{{evaluate.userName.substr(0,2) + "***"}}</span>
              &nbsp;&nbsp;&nbsp;<span >{{transformTimestamp(evaluate.sepcName)}}</span>
                
            </div>
            <p>{{evaluate.commContent}}</p>
          </el-card>
          </div>
          <el-empty description="暂无评论" v-if="three == 0"></el-empty>
        </el-tab-pane>
        <el-tab-pane label="差评" name="fourth">
          <div v-for="evaluate in evaluateAll" :key="evaluate.comm_id">
          <el-card class="box-card" v-if="evaluate.commType == -1">
            <div slot="header" class="clearfix">
              {{add(evaluate.commType)}}
              <span v-if="evaluate.isAnonymous == 0">{{evaluate.userName}}</span>
              <span v-if="evaluate.isAnonymous != 0">{{evaluate.userName.substr(0,2) + "***"}}</span>
              &nbsp;&nbsp;&nbsp;<span >{{transformTimestamp(evaluate.sepcName)}}</span>
                
            </div>
            <p>{{evaluate.commContent}}</p>
          </el-card>
          </div>
          <el-empty description="暂无评论" v-if="four == 0"></el-empty>
        </el-tab-pane>
      </el-tabs>
  </div>
  </div>
</template>

<script>

import http from "../../core/HttpRequest"

export default {
  data() {
    return {
      one: 0,
      two: 0,
      three: 0,
      four: 0,
      activeName: 'second',
      viewShow: true,
      evaluateAll: [],
    }
  },
  mounted: function() {
    let id = this.$route.query.particulars
    http.get("/product/evaluate",{
      params: {
        productId: id
      }
    }).then(res => {
      console.log(res.data.data)
      this.evaluateAll = res.data.data
      if(this.evaluateAll != "fail"){
        this.viewShow = false
      }
    })
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    transformTimestamp(timestamp){
      let a = new Date(timestamp).getTime();
      const date = new Date(a);
      const Y = date.getFullYear() + '年';
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
      const D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + '日  ';
      const h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
      const m = (date.getMinutes() <10 ? '0'+date.getMinutes() : date.getMinutes()) ;
      // const s = date.getSeconds(); // 秒
      const dateString = Y + M + D + h + m;
      // console.log('dateString', dateString); // > dateString 2021-07-06 14:23
      return dateString;
    },
    add(id){
      if(id == 1){
        this.one = 0
        this.two = 0
        this.one++
        this.two++
      }
      if(id == 0){
        this.one = 0
        this.three = 0
        this.one++
        this.three++
      }
      if(id == -1){
        this.one = 0
        this.four = 0
        this.one++
        this.four++
      }
    }
  }
}
</script>

<style>
  .text {
    font-size: 16px;
  }
  .texts {
	font-weight: 900;
    font-size: 24px;
  }
  .box-card{
    margin-bottom: 10px;
  }
</style>